<!-- 仓库管理：蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <div class="flex">
          <h1 class="f16">库存查询</h1>
          <JDialog
            :tableHeader="tableHeader"
            :width="73"
            @removeOne="removeOne"
            :currentTableRow="currentTableRow"
            @confirm="confirm"
            :unEdit="false"
          />
        </div>
        <Table
          :tableHeader="tableHeader"
          @selectList="selectTableList"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
        />
      </el-card>
      <!-- <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">材料库存查询</h1>
        <Table :tableHeader="tableHeader2" :tableData="tableData2" selection class="mt10" :isLoading="isLoading2" @currentRow="currentRow2" />
      </el-card> -->
    </div>
    <el-card shadow="never" :body-style="{ padding: '5px' }">
      <PageModule :PageData="{ total, buttonS: true }" @pageSizeChange="handleSizeChange" @pageChange="handleCurrentChange" />
    </el-card>
  </div>
</template>

<script lang="ts" setup name="Management">
import JMessage from '@/utils/JMessage'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { watch } from 'vue'
import { onMounted } from 'vue'
import { ref } from 'vue'

const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'select',
    selectValue: '',
    selectP: '仓库',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'checkbox',
    checkboxLabel: '未审核',
    checked: false
  },
  {
    type: 'date',
    dateLabel: '日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  }
])

// 表一模块
// 表一按钮
const findClicked = (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '查询') {
    getTableList()
  }
}
const tableData = ref([])
const imgList = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | undefined
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 1,
    num: 0
  },
  {
    index: 2,
    num: 0
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 表格计算函数
const cfmFlag = () => {
  const Unaudited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '有欠数')
  const Audited = formList.value.find((item: any) => item.type === 'checkbox' && item.checkboxLabel === '无欠数')
  if (!Unaudited || !Audited) return
  if (Unaudited.checked && Audited.checked) {
    return ''
  } else if (Unaudited.checked) {
    return 'N'
  } else if (Audited.checked) {
    return 'Y'
  } else {
    JMessage.warning('必须至少选择一项')
    Unaudited.checked = true
    Audited.checked = true
    return ''
  }
}
const tableHeader = ref([
  {
    label: '仓库名称',
    prop: 'warehouseName'
  },
  {
    label: '库存数量',
    prop: 'stkQty'
  },
  {
    label: '物料编码',
    prop: 'mtlNo'
  },
  {
    label: '物料名称',
    prop: 'mtlName'
  },
  {
    label: '物料单位',
    prop: 'mtlUnit'
  },
  {
    label: '物料颜色',
    prop: 'mtlColor'
  }
])
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(`/store/mlt/inventory/list?stkId=${formList.value[1].selectValue}`, {
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.data.records.map((item: any) => {
    item.mtlNo = item.mtlBase.mtlNo
    item.mtlName = item.mtlBase.mtlName
    item.mtlUnit = item.mtlBase.mtlUnit
    item.mtlColor = item.mtlBase.mtlColor
    return item
  })
  total.value = tableDataList.total
  currentRow()
}, 500)
onMounted(async () => {
  await getStoreList()
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
  getTableList2()
}
const selectedLists = ref([]) as any
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}
const processOptions = ref([])
// tableHeader:
// {
//     width: 120,
//     disable: true,
//     type: 'select',
//     label: '工艺1',
//     prop: 'process1',
//     options: processOptions
// },

// Dialog确认添加/修改按钮
const confirm = async (obj: any, dialogVisible: any, title: any) => {
  // 打印出obj的值
  //   const tempList = formateData([obj]) as any
  const { style, color } = currentTableRow.value
  // 向服务器发送请求，更新外派单信息
  if (title === '添加') {
    const res = (await service.post(`/store/warehouse/add`, {
      ...obj
    })) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.message)
    } else {
      JMessage.error(res.message)
    }
  } else if (title === '修改') {
    const res = (await service.post(`/store/warehouse/update`, {
      ...obj
    })) as any
    // 判断请求是否成功
    if (res.code === 200) {
      JMessage.success(res.message)
    } else {
      JMessage.error(res.message)
    }
  }
  // 关闭弹出框
  dialogVisible.value = false
  // 重新获取表格数据
  getTableList()
}
// 删除
const removeOne = async () => {
  const { style, color } = currentTableRow.value
  // 向服务器发送请求，更新外派单信息
  const res = (await service.post(
    `/store/warehouse/delete`,
    selectedLists.value.map((item: any) => item.id)
  )) as any
  // 判断请求是否成功
  if (res.code === 200) {
    JMessage.success(res.message)
  } else {
    JMessage.error(res.message)
  }
  // 重新获取表格数据
  getTableList()
}

// 材料库存查询
const tableHeader2 = ref([])
const tableData2 = ref([])
const isLoading2 = ref(true)
const total2 = ref(0)
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await service.post<any, any>(`/store/mlt/inventory/list?stkId=${currentTableRow.value.stkId}`, {
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading2.value = false
  tableData2.value = tableDataList.list
  total2.value = tableDataList.total
}, 500)

const currentTableRow2 = ref({}) as any
const currentRow2 = async (row: any = tableData2.value[0]) => {
  currentTableRow2.value = row
}

const getStoreList = async () => {
  const res = (await service.get(`/store/warehouse/back`)) as any
  if (res.code === 200) {
    formList.value[1].selectOptions = res.data.map((item: any) => ({
      optionKey: item.stkId,
      optionValue: item.stkId,
      optionLabel: item.warehouseName
    }))
    formList.value[1].selectValue = res.data[0].stkId
  }
}
</script>
